<template>
    <div><li>这里是bug统计，并且记录一些奇葩bug</li>
      <button @click="mocktest">click</button>
      <hr>
      <div>blurtest</div>
      <el-tag
        :key="tag"
        v-for="tag in dynamicTags1"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)">
        {{tag}}
      </el-tag>
      <el-input
        class="input-new-tag"
        v-if="inputVisible"
        v-model="inputValue"
        :ref="saveTagInputname('one')"
        size="small"
        @keyup.enter.native="handleInputConfirm"

      >
      <!--  @blur="handleInputConfirm"-->
      </el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showInput(saveTagInputname('one'))">+ New Tag</el-button>
<div></div>
      <el-tag
        :key="tag1"
        v-for="tag1 in dynamicTags2"
        closable
        :disable-transitions="false"
        @close="handleClose(tag1)">
        {{tag1}}
      </el-tag>
      <el-input
        class="input-new-tag"
        v-if="inputVisible"
        v-model="inputValue"
        :ref="saveTagInputname('two')"
        size="small"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
      >

      </el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showInput(saveTagInputname('two'))">+ New Tag</el-button>

    </div>
</template>

<script>
  import {getProject} from '../../api/interfaceManager'
    export default {
        name: "Bug",
      data(){
          return {
            rep : 'ccccc',
            dynamicTags1: ['标签一', '标签二', '标签三'],
            dynamicTags2: ['标签一', '标签二', '标签三'],
            inputVisible: false,
            inputValue: ''
          };
      },
      methods:{
          mocktest(){
            getProject()
              .then(res=>{
                this.rep = res.data;
              })
          },
        handleClose(tag) {
          this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },

        showInput(index) {
          this.inputVisible = true;
          this.$nextTick(_ => {
            console.log(this.$refs)
           let name=`${index}`
            this.$refs[name].$refs.input.focus();
          });
        },
        saveTagInputname(name){
            return `savetagInput${name}`
        },

        handleInputConfirm() {
          let inputValue = this.inputValue;
          if (inputValue) {
            this.dynamicTags.push(inputValue);
          }
          this.inputVisible = false;
          this.inputValue = '';
        }
      }
    }
</script>

<style scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
